<template>
  <div ref="outDom">
    <blog-title @goCate="goCate" :titleTag="titleArr"></blog-title>
    <blog-option
      :MessageLocation="messageLocation"
      @focusTextarea="focusTextarea"
      :blogName="blogDetailContent.title"
    ></blog-option>
    <transition name="fadeInDownBlog">
      <div class="header" v-if="competeContent" ref="test">
        <h1 style="text-shadow: 5px 5px 5px rgba(255, 255, 255, 0.8)">
          {{ blogDetailContent.title }}
        </h1>
        <p style="font-family: veria Sans Libre, Fantasy; margin-top: 10px">
          <span>ttzxh</span>
          <span>｜</span>
          <span>{{ format }}</span>
          <span>
            <i class="iconfont iconyanjing" style="color: #5183e6"></i>
            <span style="color: #5183e6; margin: 0px">
              {{ blogDetailContent.seeNum }}
            </span>
          </span>
          <span>
            <i class="iconfont icondianzan"></i>
            {{ blogDetailContent.goodNum }}
          </span>
        </p>
      </div>
    </transition>
    <transition name="fadeInUpBlog">
      <div v-if="competeContent">
        <div
          class="content"
          style="font-weight: 400"
          v-html="blogDetailContent.content"
        ></div>
        <footer ref="Footer">
          <remark></remark>
        </footer>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import Remark from "../remark/remark.vue";
import blogTitle from "../../components/catalogue.vue";
import { formatTime } from "@/formatTime";
import blogOption from "../../components/blogOption.vue";
import msg from "@/components/msg/msg";
import { ref, nextTick, computed, onMounted } from "vue";
import $axios from "@/http";
import { useRoute } from "vue-router";
import { copy } from "@/util/util";

type blogDetail = {
  time: string;
  title: string;
  seeNum: number;
  goodNum: number;
  content: string;
};
type titleArr = {
  tag: string;
  content: string;
  width: number;
  offsetTop: number;
};
const $route = useRoute();
let blogDetailContent = ref<blogDetail>({
  time: "",
  seeNum: 0,
  title: "",
  goodNum: 0,
  content: "",
});
const competeContent = ref<boolean>(false);
const messageLocation = ref<number>(0);
let titleArr = ref<Array<titleArr>>([]);
const PCDom = document.querySelector(".PCindex");
const Footer = ref<HTMLElement | null>(null);
const cssColor = ref<string>("#fff");
const cssBackgroundColor = ref<string>("#000");
const cssShadowColor = ref<string>("#000");
onMounted(() => {
  nextTick(() => {
    PCDom !== null && (PCDom.scrollTop = 0);
  });
  getBlogDetailContent();
});
const format = computed(() => formatTime(blogDetailContent.value.time));
const goCate = (offsetTop: number) => {
  PCDom && (PCDom.scrollTop = offsetTop + 100);
};
const detailCode = () => {
  let blockCode = document.querySelectorAll("pre code");

  blockCode.forEach((item) => {
    item.innerHTML = `<ul>${item.innerHTML
      .split("\n")
      .slice(0, -1)
      .map((items) => "<li>" + items + "\n</li>")
      .join("")}</ul>`;
  });
};
const handleTitle = () => {
  let content: HTMLElement | null = document.querySelector(".content");
  let node: Array<titleArr> = [];
  content &&
    Array.from(content.children).forEach((item: any) => {
      if (["H1", "H2", "H3", "H4", "H5", "H6"].includes(item.nodeName)) {
        node.push({
          tag: item.nodeName,
          content: item.innerText,
          width: parseInt(item.nodeName.charAt(1)) + 3,
          offsetTop: item.offsetTop,
        });
      }
    });
  titleArr.value = node;
};
const addDelTarget = () => {
  const hljs: NodeListOf<HTMLElement> = document.querySelectorAll("code");
  hljs.forEach((item: HTMLElement) => {
    const div = document.createElement("div");
    div.addEventListener("click", () => {
      console.log(item.getBoundingClientRect().height);
      item.style.height = item.getBoundingClientRect().height <= 30 ? "" : "6px";
    });
    div.style.position = "absolute";
    div.style.width = "15px";
    div.style.height = "15px";
    div.style.backgroundColor = "red";
    div.style.borderRadius = "15px";
    div.style.top = "8px";
    div.style.left = "15px";
    const i = document.createElement("i");
    i.addEventListener("click", () => copy(item.innerText));
    i.className = "iconfont iconfuzhi";
    i.style.position = "absolute";
    i.style.width = "15px";
    i.style.height = "15px";
    i.style.borderRadius = "15px";
    i.style.top = "6px";
    i.style.right = "10px";
    const colorI = document.createElement("i");
    colorI.addEventListener("click", async (e) => {
      if (cssColor.value === "#000") {
        cssBackgroundColor.value = "#000";
        cssColor.value = "#fff";
        cssShadowColor.value = "#000";
      } else {
        cssBackgroundColor.value = "#ece3cc";
        cssColor.value = "#000";
        cssShadowColor.value = "#00000099";
      }

      msg.success("主题修改成功成功");
    });
    colorI.className = "iconfont iconyanse";
    colorI.style.position = "absolute";
    colorI.style.width = "15px";
    colorI.style.height = "15px";
    colorI.style.borderRadius = "15px";
    colorI.style.top = "6px";
    colorI.style.right = "36px";
    item.appendChild(div);
    item.appendChild(i);
    item.appendChild(colorI);
  });
};
const focusTextarea = () => {
  const textDom: HTMLTextAreaElement | null = document.querySelector("#remarkTextarea");
  textDom?.focus();
};
const getOffsetTopToBody = (dom: HTMLElement) => {
  let bodyDom = dom;
  let localTop = dom.offsetTop;
  if (bodyDom.offsetTop === 50) {
    localTop = dom.offsetTop;
  } else {
    while (bodyDom.parentElement && bodyDom.offsetTop !== 50) {
      bodyDom = bodyDom?.parentElement;
      localTop += bodyDom.offsetTop;
    }
  }
  return {
    bodyDom,
    localTop,
  };
};
const getBlogDetailContent = () => {
  $axios
    .get("/blog/detail", {
      params: {
        id: $route.params.id,
      },
    })
    .then((res) => {
      if (res.data.error === -1) {
        competeContent.value = true;
        setTimeout(() => {
          messageLocation.value = Footer.value
            ? getOffsetTopToBody(Footer.value).localTop
            : 0;
        });
        blogDetailContent.value = res.data.data;
        nextTick(() => {
          detailCode();
          handleTitle();
          addDelTarget();
        });
      }
    });
};
</script>

<style lang="scss">
.hljs {
  transition: all 0.3s;
  color: v-bind("cssColor") !important;
  margin: 8px 0;
  padding: 8px 8px;
  overflow-x: auto;
  font-size: 14px;
  box-shadow: 0 0 8px 0 v-bind("cssShadowColor");
  border-radius: 5px;
  position: relative;
  &::before {
    line-height: 16px;
    display: block;
    content: "";
    width: 15px;
    height: 20px;
  }
}
.hljs {
  opacity: 0.8;
  border: 0;
  font-family: "Consulas", "Courier New", Courier, mono, serif;
  font-size: 12px;
  background: v-bind("cssBackgroundColor") !important;
  display: block;
  width: 100%;
  font-weight: 400;
  color: v-bind("cssColor");
  white-space: pre-wrap;
}
.hljs ul {
  overflow: auto;
  background-color: v-bind("cssBackgroundColor");
  // margin: 0px 0px 0 40px !important;
  padding: 0px;
}
.hljs ul li {
  list-style-type: style !important;
  // border-left: 1px solid #ddd !important;
  background: v-bind("cssBackgroundColor");
  padding: 5px !important;
  margin: 0 !important;
  line-height: 14px;
  word-break: break-all;
  word-wrap: break-word;
  color: v-bind("cssColor");
}
</style>

<style lang="scss" scoped>
@import url("../../css/comment/animate.css");
.header {
  text-align: center;
  overflow: hidden;
  h1 {
    margin-top: 35px;
  }
  p {
    color: #777777;
    // margin-top: 10px;
    span {
      margin: 0 15px;
      i {
        margin: 0 5px;
      }
    }
  }
}
.content {
  padding: 55px;
  font-size: 14px;
  color: #444;
  :deep(p) {
    text-indent: 2em;
    margin-bottom: 16px;
  }
  :deep(p mark) {
    background-color: #fffe5b99;
    padding: 0 8px;
  }
  :deep(p code) {
    background-color: #444444;
    color: #ddd;
    padding: 1px 8px;
  }
  :deep(li) {
    // white-space: pre;
    // text-wrap: wrap;
    margin-left: 20px;
  }
  :deep(h3) {
    margin: 16px 0;
  }
  :deep(h2) {
    margin: 16px 0;
  }
  :deep(h4) {
    margin: 16px 0;
  }
  :deep(ol li) {
    list-style: decimal;
    // margin: 8px 0;
    padding: 2px 0;
  }
  :deep(blockquote) {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 8px !important;
    p {
      margin-bottom: 0px;
      font-weight: 400;
    }
  }
  :deep(pre code) {
    margin-bottom: 16px;
  }
  :deep(pre code ul li) {
    list-style: inside;
    text-indent: 1em;
    background-color: v-bind("cssBackgroundColor");
    padding: 3px 8px;
    white-space: pre;
    &::marker {
      position: absolute;
      left: 0;
    }
  }
  :deep(ul) {
    margin-bottom: 16px;
  }
  :deep(ul li) {
    list-style: disc;
    padding: 2px 0;
  }
  :deep(ul li ul li) {
    list-style: circle;
    line-height: 0;
    margin-left: 30px;
  }
  :deep(img) {
    width: 100%;
  }
  :deep(p:has(img)) {
    text-indent: 0;
  }
  div {
    font-size: 16px;
  }
}
</style>
